/**
 * @desc 柱图
 * */
import React, { Component } from 'react';
import echarts from 'echarts';

class TheBarChart extends Component {
  componentDidMount() {
    const type = this.props.label;
    const myChartBar = echarts.init(this.barChart);
    myChartBar.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      // grid: {
      //     right: 50
      // },
      xAxis: [
        {
          type: 'category',
          data: this.props.xData,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: this.props.yName,
          min: 0,
          // axisLabel: {
          //     formatter: '{value} ￥'
          // }
        },
      ],
      color: ['#3aa0ff', '#4ecb73'],
      series: [
        {
          name: this.props.name,
          type: 'bar',
          data: this.props.yData1
        },
        // {
        //     name: type && type === 'year' ? '上月' : '昨日',
        //     type: 'bar',
        //     data: this.props.yData2
        // },
      ]
    });
    window.addEventListener('resize', function () {
      myChartBar.resize();
    });
  }

  componentWillUnmount() {
    window.removeEventListener('resize', function () {

    }, false)
  }

  render() {
    return <div ref={ref => this.barChart = ref} id="barChart" style={{ width: '100%', height: '100%' }} />
  }
}

export default TheBarChart
